<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/tool.css" />
    <style type="text/css">
        .banner-container {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 1200px;
        }
        
        .banner-list {
            position: absolute;
            display: flex;
        }
        
        .banner-list li {
            flex: 0 0 100vw;
        }
        
        .banner-list img {
            width: 100%;
        }
        
        .button-list {
            position: absolute;
            display: flex;
            left: calc(50% - 190px);
            top: 5%;
        }
        
        .button-list li {
            width: 50px;
            height: 50px;
            border-radius: 50px;
            background: white;
            margin: 10px;
            cursor: pointer;
        }
        
        .button-list li.active {
            width: 150px;
            background: teal;
        }
        
        .switch {
            position: absolute;
            z-index: 5;
            box-sizing: border-box;
            top: calc(50% - 50px);
            width: 50px;
            height: 100px;
            color: palegreen;
            font-size: 50px;
            cursor: pointer;
        }
        
        .button-right {
            left: 5%;
        }
        
        .button-left {
            right: 5%;
        }
    </style>
</head>

<body>
    <div class="banner-container">
        <ul class="banner-list">
            <li><img src="img/1.jpg" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
            <li><img src="img/1.jpg" /></li>
        </ul>
        <ul class="button-list">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="button-right switch">
            < </div>
                <div class="button-left switch">
                    >
                </div>
        </div>


        <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {

                var flag = 0;

                var bannerFlag = 0;

                // 向右滚动按钮
                $(".button-left").click(function() {

                    bannerFlag++
                    if (bannerFlag >= $(".banner-list li").length) {
                        bannerFlag = 0;
                        $(".banner-list").css({
                            left: 0
                        })
                        $(".button-left").click()
                    } else {
                        $(".banner-list").stop().animate({
                            left: -bannerFlag * $(".banner-list li").width()
                        }, 1000, "linear")

                        flag >= $(".button-list li").length - 1 ? flag = 0 : flag++;
                        $(".button-list li").removeClass("active").eq(flag).addClass("active");
                    }
                })


                // 向左滚动按钮
                $(".button-right").click(function() {
                    bannerFlag--
                    if (bannerFlag < 0) {
                        $(".banner-list").css({
                            left: -($(".banner-list li").width() * ($(".banner-list li").length - 1))
                        })
                        bannerFlag = $(".banner-list li").length - 1
                        $(".button-right").click()
                    } else {
                        $(".banner-list").stop().animate({
                            left: -bannerFlag * $(".banner-list li").width()
                        }, 1000, "linear")

                    }

                    flag <= 0 ? flag = $(".button-list li").length : flag--;
                    $(".button-list li").removeClass("active").eq(flag).addClass("active");

                })



                $(".button-list li").click(function() {
                    flag = $(this).index()
                    bannerFlag = $(this).index()
                    $(".banner-list").stop().animate({
                        left: -$(".banner-list li").width() * $(this).index()
                    }, 1000, "linear")
                    $(".button-list li").removeClass("active").eq($(this).index()).addClass("active");
                })


                setInterval(function() {
                    $(".button-left").click()
                }, 3000)



            })
        </script>

</body>

</html>